import React, { createContext, useContext, useState } from "react"

const YeahzContext = createContext<string | undefined>(undefined)

const ContextApiPage: React.FC = () => {
  const [value, setValue] = useState("hello from context!")

  const updateContextValue = () => {
    setValue("update context value!")
  }

  return (
    <div>
      <h1>Context API 示例</h1>
      <YeahzContext.Provider value={value}>
        <ComponentA />
      </YeahzContext.Provider>
      <button onClick={updateContextValue}>Reset</button>
    </div>
  )
}

const ComponentA: React.FC = () => {
  return (
    <div>
      <h2>Component A</h2>
      <ComponentB />
    </div>
  )
}

const ComponentB: React.FC = () => {
  return (
    <div>
      <h3>Component B</h3>
      <ComponentC />
    </div>
  )
}

const ComponentC: React.FC = () => {
  const contextValue = useContext(YeahzContext)

  return (
    <div>
      <h4>Component C</h4>
      <p>{contextValue}</p>
    </div>
  )
}

export default ContextApiPage
